<template>
  <div class="buy">
  <!-- 顶部首页搜索购物车 -->
    <div class="top flex">
      <div class="home">
        <image class="img" src="../../static/sy.png" mode="widthFix"/>
      </div>
      <div class="yx">网易严选</div>
      <div class="right flex">
        <image class="ss" src="../../static/ss.png" mode="widthFix"/>
        <image class="gwc" src="../../static/gwc.png" mode="widthFix"/>
      </div>
    </div>
    <!-- 身体 -->
    <div class="body">
      <div class="title flex">
        <image class="img" src="https://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png" mode="widthFix"/>
        <div class="desc">严选好物,用心生活</div>
      </div> 
      <!-- 轮播 -->
      <div class="swiper-container">
        <swiper class="bottom_swiper">
            <swiper-item class="item flex">
              <div class="brand" v-for="(ban_first,index) in bannerArr1" :key="ban_first.id">
                <image
                    class="brand_img"
                    :src="ban_first.picUrl"
                    mode="widthFix"></image>
                <div class="big_word">{{ ban_first.mainTitle }}</div>
                <div class="small_word">{{ ban_first.viceTitle }}</div>
              </div>
            </swiper-item>
            <swiper-item class="item flex">
              <div class="brand" v-for="(ban_sec,index) in bannerArr2" :key="ban_sec.id">
                <image
                    class="brand_img"
                    :src="ban_sec.picUrl"
                    mode="widthFix"></image>
                <div class="big_word">{{ ban_sec.mainTitle }}</div>
                <div class="small_word">{{ ban_sec.viceTitle }}</div>
              </div>
            </swiper-item>
        </swiper>
      </div>
    </div>
    <div class="pbl flex">
      <div class="row" v-for="(pbl,index) in PblInfo" :key="index">
        <div class="item" v-for="(item,index) in pbl.topics" :key="index">
          <image class="image" :src="item.picUrl" mode="widthFix"/>
          <div class="title">{{item.title}}</div>
          <div class="footer flex">
            <div class="left flex">
              <image class="img" src="https://yanxuan.nosdn.127.net/e92a567f96b94dcea29eafea9ab42440.png" mode="widthFix"/>
              <div class="name">{{item.mainTitle}}</div>
            </div>
            <div class="right flex">
              <image class="img" src="../../static/eye.png" mode="widthFix"/>
              <div class="number">9080</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
//引入uni相关
import { onLoad,onReachBottom } from '@dcloudio/uni-app'
//引入api请求
import { reqBuyBanner,reqPblInfo } from '@/api';
//引入vue相关
import {ref} from 'vue'

//定义响应式数据
//轮播图数据
let bannerArr1 = ref<any>([]);
let bannerArr2 = ref<any>([]);
//当前页数
let page = ref<any>(1)
//每页条数
let size = ref<any>(2)
//瀑布流数据
let PblInfo = ref<any>({})
//是否还有更多数据
let show = ref<any>('more')


//定义方法
//获取值得买轮播图数据
const getBuyBanner = async() => {
  let res = await reqBuyBanner();
  res.data.navList.forEach((item:any, index:any) =>{
    if (index > 7) {
      bannerArr2.value.push(item);
    } else {
      bannerArr1.value.push(item);
    }
  } )
}

//获取瀑布流数据
const getPblInfo = async ()=>{
  let result = await reqPblInfo(page.value,size.value)
  if(result.code==200){
    PblInfo.value = result.data.result
    PblInfo[0]?.value.push(...result.data.result[0])
    PblInfo[1]?.value.push(...result.data.result[1])
    if(result.data.result.length>1){
      show.value = 'more'
    }else{//没有更多
      show.value = 'nomore'
    }
  }
}



//生命周期钩子
//页面挂载
onLoad(()=>{
  //获取值得买轮播图数据
  getBuyBanner()
  //获取瀑布流数据
  getPblInfo()
})
//页面触底
onReachBottom(()=>{
  if(show.value=='more'){//还有数据
    page.value ++
    getPblInfo()
  }
})


</script>

<style scoped lang="less">
.buy{
  width: 100%;
  background-color: #efefef;
  /* 顶部个人信息 */
  .top{
    width: 100%;
    height: 80rpx;
    border-bottom: 1px solid #ccc ;
    align-items: center;
    background-color: white;
    .home{
      width: 18%;
      padding: 20rpx;
      .img{
        width: 50rpx;
      }
    }
    .yx{
      width: 60%;
      text-align: center;
      font-weight: 900;
    }
    .right{
      width: 22%;
      justify-content: space-around;
      .ss{
        width: 50rpx;
      }
      .gwc{
        width: 50rpx;
      }
    }
  }
  .body{
    background-image: url('	https://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg?imageView');
    background-size: cover;
    height: 600rpx;
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    .title{
      .img{
        margin-top: 80rpx;
        width: 140rpx;
      }
      .desc{
        color: white;
        position: relative;
        top: 100rpx;
      }
    }
    /* 轮播图 */
    .swiper-container{
      width: 100%;
      height: 270px; /* 调整轮播图高度 */
      background-color: white;
      border-radius: 30rpx;
      .bottom_swiper{
          width: 100%;
          height: 100%;
          margin: 0 20rpx;
          .item{
            width: 25%;
            height: 100%;
            padding: 30rpx 20rpx;
            flex-wrap: wrap;
            box-sizing: border-box;
              .brand{
                width: 25%;
                .brand_img{
                  width: 134rpx;
                  height: 134rpx;
                }
                .big_word{
                  font-weight: bold;
                }
                .small_word{
                  font-size: 24rpx;
                  color: #ccc;
                }
              }
          }
        }
    }
  }
  /* 瀑布流 */
  .pbl{
    margin-top: 120rpx;
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    justify-content: space-between;
    .row{
      width: 48%;
      .item{
        // border: 1px solid #ccc;
        border-radius: 10rpx;
        overflow: hidden;
        margin-bottom: 30rpx;
        background-color: white;
        .image{
          width: 100%;
        }
        .title{
          padding: 16rpx;
        }
        .footer{
          justify-content: space-between;
          padding: 10rpx;
          box-sizing: border-box;
          .left{
            .img{
              width: 40rpx;
              margin-right: 10rpx;
            }
          }
          .right{
            align-items: center;
            .img{
              width: 30rpx;
            }
          }
        }
      }
    }
      
      
    
  }
}

</style>